﻿@using BlockMain_Class
@{
    Layout = "/Views/Shared/_Layout.cshtml";
    var s = (SelectBlock)Model;
    bool b = s.Msg == "ok";
}
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    input, button, a {
        outline: none;
    }

    html, body {
        height: 100%;
    }

    .bgimg {
        height: 100%;
        width: 100%;
        background: url(/Assets/Images//all.png) no-repeat;
    }
    /*侧边栏*/
    .left {
        width: 4%;
        height: 100%;
        background-color: #32323a;
        float: left;
    }

        .left .logo {
            background-color: #393941;
            height: 55px;
            width: 100%;
            background-image: url(/Assets/Images//logo_1.png);
            background-repeat: no-repeat;
            background-size: 80%;
            background-position: 5px;
        }
    /*公链展示*/
    .right {
        width: 96%;
        height: 100%;
        float: left;
        color: white;
    }

        .right .top {
            height: 55px;
            width: 100%;
            background-color: rgba(6,142,220,0.9);
            font-size: 16px;
        }

            .right .top img {
                margin-right: 10px;
            }

            .right .top .user {
                width: 145px;
                height: 100%;
                float: left;
                margin-left: 60px;
                line-height: 55px;
            }

            .right .top .checkout {
                width: 105px;
                height: 100%;
                float: right;
                margin-right: 40px;
                line-height: 55px;
            }

        .right .middle {
            height: 85%;
        }

            .right .middle .contant {
                width: 90%;
                margin: 30px auto 0;
                height: 100%;
            }

                .right .middle .contant .title {
                    border-bottom: 3px solid rgb(6,142,220);
                    padding-bottom: 5px;
                    font-size: 26px;
                    width: 220px;
                    color: white;
                    font-weight: bold;
                    margin-bottom: 20px;
                    text-align: center;
                }

    @@media screen and (max-height: 940px) {
        .input-part {
            height: 80px;
        }
    }

    @@media screen and (min-height: 941px) {
        .input-part {
            height: 103px;
        }
    }

    .right .middle .contant .input-part {
        width: 100%;
        background-color: rgba(64,63,76,0.8);
        border-radius: 10px;
    }

    @@media screen and (max-height: 940px) {
        .input {
            margin-top: 18px;
        }
    }

    @@media screen and (min-height: 941px) {
        .input {
            margin-top: 30px;
        }
    }

    .contant .input-part .input {
        float: left;
        font-size: 18px;
        height: 40px;
        width: 87%;
        margin-left: 50px;
    }

    @@media screen and (max-height: 940px) {
        .button {
            margin-top: 18px;
        }
    }

    @@media screen and (min-height: 941px) {
        .button {
            margin-top: 30px;
        }
    }

    .contant .input-part .button {
        float: left;
        height: 45px;
        width: 6%;
        background-color: #06a4fc;
        text-align: center;
        line-height: 45px;
        border-radius: 5px;
        font-size: 16px;
        position: relative;
        right: 10px;
    }

    .contant .input-part .input label {
        width: 100%;
        height: 100%;
    }

    .contant .input-part .input input {
        height: 45px;
        width: 90%;
        border-radius: 8px;
        border: 1px solid #c2c3c7;
        background-color: rgba(0,0,0,0);
        padding-left: 20px;
    }
    /*打印*/
    @@media screen and (max-height: 940px) {
        .resualt {
            height: 63%;
        }
    }

    @@media screen and (min-height: 941px) {
        .resualt {
            height: 77%;
        }
    }

    .resualt {
        width: 100%;
        border-radius: 10px;
        margin-top: 20px;
    }

        .resualt .print {
            width: 600px;
            height: 100%;
            margin: auto;
            background-color: white;
            padding: 40px;
        }

    .print::-webkit-scrollbar { /*滚动条整体样式*/
        width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }

    .print::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
    }

    .print::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.2);
    }

    .resualt .noprint {
        float: right;
        height: 40px;
        width: 100px;
        background-color: #06a4fc;
        text-align: center;
        line-height: 40px;
        border: 1px solid #06a4fc;
        border-radius: 5px;
        position: relative;
        bottom: 60px;
        right: 40px;
    }

        .resualt .noprint input {
            background-color: #06a4fc;
            height: 100%;
            width: 100%;
            border: 0;
        }

    h2 {
        color: #e30f15;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .logo {
        width: 100%;
        height: 100px;
    }

        .logo .first {
            height: 100px;
            width: 140px;
            float: left;
            padding-right: 40px;
        }

        .logo img {
            height: 100%;
            width: 100%;
        }

        .logo .second {
            height: 100px;
            width: 140px;
            float: left;
            padding-right: 40px;
        }

    .name {
        color: black;
        margin-bottom: 10px;
        height: 70px;
    }

        .name > div {
            font-size: 17px;
            margin-bottom: 20px;
        }

            .name > div span {
                font-weight: bold;
            }

    table {
        width: 100%;
        color: black;
    }

        table tr {
            border-bottom: 1px solid rgb(246,246,246);
        }

            table tr td, th {
                padding: 10px;
            }

    .seal {
        width: 100%;
        height: 120px;
    }

        .seal .first {
            height: 150px;
            width: 150px;
            float: right;
        }

            .seal .first img {
                height: 100%;
                width: 100%;
            }

    @@media print {
        h2 {
            color: #e30f15;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }

        .logo {
            width: 100%;
            height: 100px;
        }

            .logo .first {
                height: 100px;
                width: 140px;
                float: left;
                padding-right: 40px;
            }

            .logo img {
                height: 100%;
                width: 100%;
            }

            .logo .second {
                height: 100px;
                width: 140px;
                float: left;
                padding-right: 40px;
            }

        .name {
            color: black;
            margin-bottom: 10px;
            height: 70px;
        }

            .name > div {
                font-size: 17px;
                margin-bottom: 20px;
            }

                .name > div span {
                    font-weight: bold;
                }

        table {
            width: 100%;
            color: black;
        }

            table tr {
                border-bottom: 1px solid rgb(246,246,246);
            }

                table tr td, th {
                    padding: 10px;
                }

        .seal {
            width: 100%;
            height: 120px;
        }

            .seal .first {
                height: 150px;
                width: 150px;
                float: right;
            }

                .seal .first img {
                    height: 100%;
                    width: 100%;
                }
    }
</style>
<body style="height: auto">
    <div class="resualt">
        <p>
            <!--startprint-->
            <div class="print" style="border: 1px solid #e5e2e2">
                <div class="logo">
                    <div class="first">
                        <img src="/Assets/Images/jyb_2.png" />
                    </div>
                    <div class="second">
                        <img src="/Assets/Images/jyb_1.png" />
                    </div>
                </div>
                <h2>检 测 报 告 证 书</h2>
                <div class="name">
                    <div>
                        送检单位:<span>@(b ? s.Mechanism : "")</span>
                    </div>
                    <div>
                        检测类型:<span>@(b ? s.TypeName : "")</span>
                    </div>
                </div>
                <table border="0" cellspacing="" cellpadding="">
                    <tr>
                        <th>项目名称</th>
                        <th>是否合格</th>
                        <th>完成时间</th>
                    </tr>
                    @if (b)
                    {
                        foreach (var item in s.ProjecItem)
                        {
                            <tr class="remove"><td>@(item.Name)</td><td>@(item.IsQualified ? "是" : "否")</td><td>@(item.SuceessTime)</td></tr>
                        }

                    }
                    <tr>
                        <td colspan="3">报告原件：@(b ? !string.IsNullOrEmpty(s.FilePath) ? "http://121.43.191.79:4006/" + s.FilePath : "未上传" : "")</td>
                    </tr>
                </table>
                <div class="seal">
                    <div id="code" style="display:inline-block;width:49%;margin-top:20px;margin-left:10px"></div>
                    <div class="first" style="display:inline-block;">
                        <img src="@(b ? s.NowPeerUrl : "")" />
                    </div>
                </div>
            </div>
            <!--endprint-->
        </p>
    </div>
</body>
<script src="~/js/jquery.qrcode.min.js"></script>
<script>
    $(function () {
 
         $('#code').qrcode({
                render: "canvas", //也可以替换为table
                width: 120,
                height: 120,
                text: "@(b ? s.Hash : "")"/*可以通过ajax请求动态设置*/

            })
            //将生成的二维码转换成图片格式
            var canvas = qrcode.find('canvas').get(0);
            $('#qrcodeImg').attr('src', canvas.toDataURL('image/jpg'));
        });
</script>
<script>

    window.onload = function () {
        window.print();
    }

</script>